<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      /* .a {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
/* } */
  </style> 
</head>
<body>
  
  <h2 class="name"></h2>
<div class="a"></div>


  <!-- <script>

    const obj = {
      name: "why",
      age: 18,
      height: 1.88
    }

    // 1.针对一个属性
    // let _name = obj.name
    // Object.defineProperty(obj, "name", {
    //   set: function(newValue) {
    //     console.log("监听: 给name设置了新的值:", newValue)
    //     _name = newValue
    //   },
    //   get: function() {
    //     console.log("监听: 获取name的值")
    //     return _name
    //   }
    // })

    // 2.监听所有的属性: 遍历所有的属性, 对每一个属性使用defineProperty
    const keys = Object.keys(obj)
    for (const key of keys) {
      let value = obj[key]
      Object.defineProperty(obj, key, {
        set: function(newValue) {
          console.log(`监听: 给${key}设置了新的值:`, newValue)
          value = newValue
        },
        get: function() {
          console.log(`监听: 获取${key}的值`)
          return value
        }
      })
    }

    // console.log(obj.name)
    // obj.name = "kobe"
    console.log(obj.age)
    obj.age = 17
    console.log(obj.age)



    // const nameEl = document.querySelector(".name")
    // nameEl.textContent = obj.name
    // obj.name = "kobe"
    // obj.name = "james"



  </script> -->

</body>
</html>